<template >
    <div>
        <Dialog v-model="showDialog" title="添加配置" width="900px" :before-close="cancel">
            <div class="card-box">
                <el-card v-for="(item,idx) in listData" :key="idx" shadow="hover" @click="confirm(item)">
                    {{item.title}}
                </el-card>
                <!-- 占位符 -->
                <div class="_div_placeholder"></div>
                <div class="_div_placeholder"></div>
                <div class="_div_placeholder"></div>
                <div class="_div_placeholder"></div>
                
            </div>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary">确定</el-button>
        </span>
      </template>
    </Dialog>
    </div>
</template>
<script setup lang="ts">
// import sysConfigApi from "@/api/sysConfigApi";
// import { array } from "js-md5";
const props = defineProps({
  showDialog: Boolean,
  listData: Array,
});
const { showDialog, listData } = toRefs(props);
const loading = ref(false)
// watch(showDialog, (val) => {
//   getConfigurationTypes()

// });

// const getConfigurationTypes = async()=> {
//   loading.value = true;
//   let params = {
//     currentPage: 1,
//     showCount: -1,
//   }
//   let rs: any = await sysConfigApi.getConfigurationTypes(params);
//   if (rs.code === 200) {
//     listData.value = rs.payload
//     // ruleForm.value.definition = rs.payload.definition;
//     // ruleForm.value.props = rs.payload.props;
//   }
//   loading.value = false;
// }

const confirm = (item: any) => {
  emit("confirmSelect", item.type);
};

const cancel = () => {
  emit("cancel", "selectConfigDialog");
};
const emit = defineEmits(["confirmSelect", "cancel"]);
</script>

<style lang="scss" scoped>
    .card-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-right: 20px;
        
        .el-card {
            width: 200px;
            margin-bottom: 20px;
            cursor: pointer;
        }
        ._div_placeholder {
          width: 200px;
        }
       
    }
</style>